<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{position:relative;}
        .box{padding:6px;float:left;}
        .imgbox{border:solid 1px black;padding: 6px;border-radius: 6px;}
        img{width:200px;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
                <p>这是图片说明</p>
            </div>
        </div>
    </div>
</body>
<script>
    // 瀑布流
    // 怎么区分第一行和其他行
    // 第一行浮动即可(css即可)
        // 获取所有高度，作为列高
    // 从第二行开始定位
        // top：求出最小列高
        // left：最小列高的索引 * 任意一个容器的宽
        // 修改最小列高 = 最小列高 + 当前放置元素的高度

    class Waterfall{
        constructor(){
            // 选择元素
            this.box = document.querySelectorAll(".box");
            // 提前获取要使用到的尺寸
            this.boxW = this.box[0].offsetWidth;
            this.clientW = document.documentElement.clientWidth;
            // 计算一行最多放几个元素
            this.maxNum = parseInt(this.clientW / this.boxW);
            // 准备存放各列高度的容器
            this.heightArr = [];
            // 第一行
            this.firstLine();
            // 其他行
            this.otherLine();
        }
        firstLine(){
            for(let i=0;i<this.maxNum;i++){
                // 获取所有高度，准备给其他行使用
                this.heightArr.push(this.box[i].offsetHeight);
            }
        }
        otherLine(){
            for(let i=this.maxNum;i<this.box.length;i++){
                // console.log(this.heightArr)

                // 排序（注意深浅拷贝是否影响原数组）ES5-
                // const arr = this.heightArr.slice(0);
                // const min = arr.sort((a,b)=>a-b)[0];

                // 函数的apply方法，强行向原函数内传入数组，ES5
                // const min = Math.min.apply(null, this.heightArr);
                
                // 展开运算符，ES6
                // 求出最小列高
                const min = Math.min(...this.heightArr);
                // 求最小列高的索引
                const minIndex = this.heightArr.indexOf(min);
                // 设置已定位
                this.box[i].style.position = "absolute";
                // 将最小列高设置为当前元素top
                this.box[i].style.top = min + "px";
                // 根据最小列高索引计算当前元素left
                this.box[i].style.left = minIndex * this.boxW + "px";

                // 修改最小列高 = 最小列高 + 当前放置元素的高度
                this.heightArr[minIndex] += this.box[i].offsetHeight;

                // 剩下的交给循环....
            }
        }
    }

    onload = function(){
        // 因为结构内有容器的尺寸是由外部资源撑开，所以需要在外部资源加载完毕后，再执行本功能
        new Waterfall();
    }
        
</script>
</html>